<template>
  <div class="s-warp">
    <n-modal class="s-model" label-placement="left" label-width="auto" require-mark-placement="right-hanging" :style="{
        width: '500px',
        background: 'linear-gradient( 180deg, #0E2B4A 0%, #081C2B 100%)',
        color: '#fff',
      }" v-model:show="modal" :show-icon="false" preset="dialog">
      <div class="title fs16 title-no-line">{{formParams.id ? '编辑': '新增'}}变量</div>
      <div class="title-line"></div>
      <n-form ref="formRef" :model="formParams" require-mark-placement="left" :rules="rules" label-placement="left"
        label-width="100px">
        <n-row :gutter="[0, 24]">
          <n-col :span="24">
            <div class="s-input">
              <n-form-item label="变量名称" path="var_name">
                <n-input clearable v-model:value="formParams.var_name" placeholder="请输入" />
              </n-form-item>
              <n-form-item label="测点选择" path="point_name">
                <!-- <n-select clearable filterable placeholder="请选择" value-field="key" :options="pointNameOptions"
                  v-model:value="formParams.point_name" /> -->
                <n-tree-select clearable filterable placeholder="请选择" :options="pointNameOptions" value-field="key"
                  v-model:value="formParams.point_name" />
              </n-form-item>

              <n-form-item label="时间范围" path="time_frame">
                <n-select clearable filterable placeholder="请选择" :options="timeFrameOptions"
                  v-model:value="formParams.time_frame" />
              </n-form-item>

              <n-form-item label="数据颗粒度" path="data_sieze">
                <n-select clearable filterable placeholder="请选择" :options="dataSiezeOptions"
                  v-model:value="formParams.data_sieze" />
              </n-form-item>
            </div>
          </n-col>
        </n-row>
      </n-form>
      <template #action>
        <n-space class="btns">
          <div class="btn cancel" @click="cancel">取消</div>
          <div class="btn confirm" @click="confirmForm">确认</div>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, h, watch, onMounted } from 'vue';
// import { hrsVarEditFormEdit, hrsVarEditFormGet } from '@/api/GlobalVarMgt/GlobalVarMgt'; // todo open
// import { getPointTree } from '@/api/common/common'; // todo open
import { useMessage } from 'naive-ui';
const message = useMessage();
const emits = defineEmits(['callback']);
let modal = ref(false);
// 策略模板提交数据
let formParams = ref({
  id: '',
  point_name: '',
  time_frame: '',
  data_sieze: '',
  var_name: ''
});
// 表单提交验证规则
const rules = {
  var_name: { required: true, trigger: 'blur', message: '请输入' },
  data_sieze: { required: true, type: 'number', trigger: 'change', message: '请选择' },
  time_frame: { required: true, type: 'number', trigger: 'change', message: '请选择' },
  point_name: { required: true, trigger: 'change', message: '请选择' },
};
// 测点名称下拉数据
const pointNameOptions = ref([
  { label: '测点名称1', key: '测点名称1' },
  { label: '测点名称2', key: '测点名称2' },
  { label: '测点名称3', key: '测点名称3' },
])
// 时间范围下拉数据  1-最近1小时 2-最近12小时 3-最近1天 4-最近7天 5-最近30天
const timeFrameOptions = [
  { label: '最近1小时', value: 1 },
  { label: '最近12小时', value: 2 },
  { label: '最近1天', value: 3 },
  { label: '最近7天', value: 4 },
  { label: '最近30天', value: 5 },
];
// 数据颗粒度下拉数据 1-10秒 2-30秒 3-1分钟 4-5分钟 5-15分钟 6-30分钟 7-1小时 8-1天
const dataSiezeOptions = [
  { label: '10秒', value: 1 },
  { label: '30秒', value: 2 },
  { label: '1分钟', value: 3 },
  { label: '5分钟', value: 4 },
  { label: '15分钟', value: 5 },
  { label: '30分钟', value: 6 },
  { label: '1小时', value: 7 },
  { label: '1天', value: 8 },
];
// 提交表单ref
const formRef = ref(null);
// 模板显示
// 初始化数据
async function init(params) {
  formParams.value = {
    id: '',
    point_name: '',
    time_frame: '',
    data_sieze: '',
    var_name: ''
  }
  // todo open -- start
  // let res = await hrsVarEditFormGet({id: params.id})
  // if(res.code == 200) {
  //   formParams.value =  {...formParams.value, ...res.data};
  // }
  // todo open -- end
  modal.value = true;
}

// 弹窗模板关闭
function closeDialog() {
  modal.value = false;
}
// 取消
function cancel() {
  modal.value = false;
}
// 数据提交
function confirmForm() {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      let res = await hrsVarEditFormEdit(formParams.value);
      if (res.code == 200) {
        modal.value = false;
        message.success(res.msg || '成功');
        // 发送消息
        modal.value = false;
        emits('send', 'refreshTable');
      }
      if (res.code != 200) {
        message.error(res.msg || '失败');
      }
    }
  });
}

// 下拉数据初始化
function selectDataInit() {
  getPointTree().then(res => {
    if (res.code == 200) {
      pointNameOptions.value = res.data;
    }
  })
}

// 页面初始化
onMounted(() => {
  // selectDataInit(); // todo open
})
// 向外暴露方法
defineExpose({
  init,
});
</script>
<style lang="less" scoped>
.fs16 {
  font-size: 16px;
}
.mgt10 {
  margin-top: 10px;
}

.input {
  border: 1px solid #25435e;
  border-radius: 4px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: none;
  padding-left: 10px;
}
.btn {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding: 0 14px;
  cursor: pointer;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.cancel {
  background: linear-gradient(
    180deg,
    rgba(#375b8a, 0.5) 0%,
    rgba(103, 107, 109, 0.1) 45%,
    rgba(103, 107, 109, 0.1) 55%,
    rgba(#375b8a, 0.5) 100%
  );
}
.confirm {
  background: linear-gradient(
    180deg,
    rgba(#2282e3, 0.5) 0%,
    rgba(103, 107, 109, 0.1) 45%,
    rgba(103, 107, 109, 0.1) 55%,
    rgba(#2282e3, 0.5) 100%
  );
}

.form-item {
  width: 100%;
}
.table {
  width: 100%;
}
.line {
  border-bottom: 1px solid #2e4563;
  margin-bottom: 20px;
}
.title {
  border-bottom: 1px solid #2e4563;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.title-no-line {
  border-bottom: none;
}
.flr {
  float: right;
}

.fll {
  float: left;
}

.cf:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}

.cf {
  zoom: 1;
}
.text-blue {
  color: #2282e3;
  cursor: pointer;
  text-decoration: underline;
}
.title-line {
  position: absolute;
  top: 36px;
  left: -28px;
  width: calc(100% + 56px);
  height: 1px;
  background: #25435e;
}
</style>

<style>
.s-input {
  width: 100%;
}
.s-input .n-input {
  background: none;
  width: 100%;
}
.s-input .n-form-item-label__text {
  color: #fff !important;
}
.s-input .n-input__input-el {
  color: #fff !important;
}

.s-table .n-input {
  background: none;
  color: #fff;
}

.s-table .n-input__input-el {
  color: #fff !important;
}

.s-input .n-input__state-border {
  border: none !important;
}
.s-table .n-select {
  background: none !important;
}
.s-table .n-base-selection-label {
  background: none !important;
}
.s-table .n-base-selection-input__content {
  color: #fff;
}

.s-warp .n-input_focus {
  background: red;
}
.s-warp .n-input--disabled {
  background: #333 !important;
}
.s-input .n-base-selection-label {
  background: none !important;
}
.s-input .n-base-selection-label__render-label {
  color: #fff !important;
}
.s-input .n-input__border {
  border: 1px solid #25435e !important;
}
.s-input .n-base-selection__border {
  border: 1px solid #25435e !important;
}

.s-table .n-input__border {
  border: 1px solid #25435e !important;
  /* border: none !important; */
}

.s-table .n-base-selection__border {
  border: 1px solid #25435e !important;
  /* border: none !important; */
}
.s-input .n-input--focus {
  background: none !important;
}

.s-table .n-input--focus {
  background: none !important;
}

.r-boder .n-base-selection__border {
  border: none !important;
}

.r-boder .n-input__border {
  border: none !important;
}

.r-table .n-data-table .n-data-table-th {
  background: none !important;
}
.r-table .n-data-table .n-data-table-td {
  background: none !important;
}
.r-table .n-data-table.n-data-table--bottom-bordered .n-data-table-td.n-data-table-td--last-row {
  border-bottom: none !important;
}

.r-table .n-data-table-table {
  background: none !important;
}

.r-table .n-data-table-thead {
  background: none !important;
}
.r-table .n-data-table-tr:hover {
  background: none !important;
}

.r-boder .n-base-icon {
  display: none !important;
}

.r-boder .n-input__state-border {
  display: none !important;
}
.r-boder .n-base-selection__state-border {
  display: none !important;
}
.r-boder .n-base-selection-input__content {
  color: #006fff !important;
}

.n-dialog .n-base-select-menu {
  border: 1px solid #25435e !important;
  background: #0b1d2e !important;
}
.n-base-select-option__content {
  color: #d7e7f6 !important;
}
.n-base-select-option.n-base-select-option--pending::before {
  background: rgba(161, 159, 159, 0.1) !important;
}
.s-model .n-data-table-td {
  position: relative;
}
.r-boxed {
  position: absolute;
  top: 8px;
  left: 0;
  display: block;
  width: 400px;
  height: 36px;
  border: 1px solid #25435e;
  border-radius: 4px;
}
.s-model .n-base-suffix__arrow {
  width: 0;
  height: 0;
  border-top: 4px solid #869fb7;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.s-model .n-base-suffix__arrow svg {
  display: none;
}
.s-input .n-button--medium-type {
  display: none !important;
}

.s-upload {
  margin-top: 10%;
  text-align: center;

  margin-left: 5%;
}
.s-upload .n-upload-trigger {
  border: 1px solid #25435e;
  padding: 40px 20px;
  color: #869fb7;
}
.s-model {
  padding-top: 0 !important;
}
.s-model .n-dialog__close{
  top: -10px !important;
}
</style>